<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <ul class="list">
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
    <li>link5</li>
  </ul>
</body>
<script>

  // 问题：在循环内绑定事件，事件处理函数内，无法获取循环每次的计数器
  // 异步
  // 循环立即执行，事件将来执行，事件执行时循环已经执行结束
  // 所以在事件处理函数内，获取到的循环计数器为循环结束后的计数器

  const li = document.querySelectorAll(".list li");

  // for(var i=0;i<li.length;i++){
  //   li[i].onclick = function(){
  //     console.log(i);
  //   }
  // }

  // for(var i=0;i<li.length;i++){
  //   li[i].onclick = (function(x){
  //     return function(){
  //       console.log(x);
  //     }
  //   })(i);
  // }

  // for(var i=0;i<li.length;i++){
  //   ;(function(i){
  //     li[i].onclick = function(){
  //       console.log(i);
  //     }
  //   })(i);
  // }

  // for(let i=0;i<li.length;i++){
  //   li[i].onclick = function(){
  //     console.log(i);
  //   }
  // }

  // li.forEach((val, idx)=>{
  //   val.onclick = function(){
  //     console.log(idx);
  //   }
  // })



  // ===============

  // 给不能传参的自定义函数传参
    // 给事件处理函数传参

  // document.onclick = fn(123);
  // function fn(a){
  //   return function(){
  //     console.log(a);
  //   }
  // }


  // ==========

  // 给不能传参的自定义函数传参
    // 回调函数

  setTimeout( fn("hello"), 2000 );

  function fn(a){
    return function(){
      console.log(a);
    }
  }
  
  
</script>
</html>